<template>
  <div>
    <el-container class="flex flex-column">
      <el-card style="width: 100%;" shadow="never">
        <div class="flex flex-justify-between " style="padding-bottom: 10px;">
          <div style="display: flex">
            <div class="iconfont icon-search"></div>
            <div>筛选搜索</div>
          </div>
          <div>
            <el-button @click="clearBtn('formInline')">重置</el-button>
            <el-button type="primary" @click="onSubmit">查询搜索</el-button>
          </div>
        </div>
        <el-form
          :inline="true"
          :model="formInline"
          label-position="right"
          label-width="160px"
          class="demo-form-inline"
        >
          <el-form-item label="审批人">
            <el-input v-model="formInline.user" placeholder="输入审批人"></el-input>
          </el-form-item>
          <el-form-item label="收货人">
            <el-input v-model="formInline.custom" placeholder="输入收货人">
            </el-input>
          </el-form-item>
          <el-form-item label="提交时间">
            <el-date-picker
              v-model="formInline.value"
              type="datetime"
              placeholder="选择日期时间"
              align="right"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="订单状态">
            <el-input v-model="formInline.status" placeholder="输入订单状态"></el-input>
          </el-form-item>
          <el-form-item label="订单分类">
            <el-select v-model="formInline.type" placeholder="选择订单分类">
              <el-option label="手机" value="1"></el-option>
              <el-option label="电脑" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单来源">
            <el-select v-model="formInline.methods" placeholder="选择订单来源">
              <el-option label="网购" value="1"></el-option>
              <el-option label="实体店" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card style="margin: 20px" shadow="never">
        <div class="flex">
          <div class="iconfont icon-list"></div>
          <span>数据列表</span>
        </div>
      </el-card>
      <el-card shadow="never">
        <el-table
          v-loading="loading"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column align="center" type="selection" width="55" />
          <el-table-column align="center" label="编号" prop="id" border width="120" />
          <el-table-column align="center" label="订单编号" prop="orderId" border width="150" />
          <el-table-column align="center" label="提交时间" prop="time" border width="200" />
          <el-table-column align="center" label="用户" prop="userName"  border width="120" />
          <el-table-column align="center" label="订单金额" prop="price"  border width="120" >
            <template slot-scope="scope">
              ¥ {{scope.row.price}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="支付方式" prop="methods"  border width="120" />
          <el-table-column align="center" label="订单来源" prop="region"  border width="120" />
          <el-table-column align="center" label="订单状态" prop="status"  border width="120" />
          <el-table-column prop="handle" label="操作" border>
            <template slot-scope="scope">
              <el-dropdown>
                <div class="iconfont icon-menu"></div>
                <el-dropdown-menu slot="dropdown" >
                  <el-dropdown-item
                    v-for="item in dropDown"
                    :key="item.id"
                    :command="item.id"
                    @click.native="handleCommand(item.id, scope.row)"
                  >{{item.name}}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <div class="flex flex-justify-between" style="margin-top: 20px">
          <div >
            <el-button @click="toggleSelection(tableData)">全选</el-button>
            <el-button @click="toggleSelection()">取消选择</el-button>
            <el-dropdown style="margin-left: 10px">
              <el-button>操作</el-button>
              <el-dropdown-menu slot="dropdown" >
                <el-dropdown-item
                  v-for="item in dropDown"
                  :key="item.id"
                  :command="item.id"
                  @click.native="multipleHandleCommand(item.id)"
                >{{item.name}}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="pagination">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="1000"
              @current-change="pageChange"
            >
            </el-pagination>
          </div>
        </div>
      </el-card>
    </el-container>
  </div>
</template>

<script>
  import {hello, test1, test2} from '@/api/api'
  export default {
    name: 'orderList',
    data() {
      return {
        loading: true,
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        formInline: {
          user: '',
          custom: '',
          value: '',
          status: '',
          methods: ''
        },
        dropDown: [{
          id: 1,
          name: '查看'
        }, {
          id: 2,
          name: '添加'
        }, {
          id: 3,
          name: '修改'
        }, {
          id: 4,
          name: '删除'
        }],
        tableData: [{
          id: '12',
          orderId: '20190424100086',
          time: '2019-04-24 15:32:22',
          userName: 'Szp',
          price: '8731',
          methods: '微信',
          region: '派单',
          status: '发货'
        },{
          id: '13',
          orderId: '20190424100086',
          time: '2019-04-24 15:32:22',
          userName: 'Szp',
          price: '8731',
          methods: '微信',
          region: '派单',
          status: '发货'
        },{
          id: '14',
          orderId: '20190424100086',
          time: '2019-04-24 15:32:22',
          userName: 'Szp',
          price: '8731',
          methods: '微信',
          region: '派单',
          status: '发货'
        },{
          id: '15',
          orderId: '20190424100086',
          time: '2019-04-24 15:32:22',
          userName: 'Szp',
          price: '8731',
          methods: '微信',
          region: '派单',
          status: '发货'
        },{
          id: '16',
          orderId: '20190424100086',
          time: '2019-04-24 15:32:22',
          userName: 'Szp',
          price: '8731',
          methods: '微信',
          region: '派单',
          status: '发货'
        },{
          id: '17',
          orderId: '20190424100086',
          time: '2019-04-24 15:32:22',
          userName: 'Szp',
          price: '8731',
          methods: '微信',
          region: '派单',
          status: '发货'
        },{
          id: '18',
          orderId: '20190424100086',
          time: '2019-04-24 15:32:22',
          userName: 'Szp',
          price: '8731',
          methods: '微信',
          region: '派单',
          status: '发货'
        }],
        multipleSelection: []
      }
    },
    methods: {
      pageChange(currentPage) {
        console.log(currentPage)
      },
      onSubmit() {
        console.log(this.formInline);
      },
      clearBtn() {
        this.formInline = {
          user: '',
          custom: '',
          value2: '',
          status: '',
          methods: ''
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleCommand(index, data) {
        this.$router.push({path: '/order/listDetail',params:{ id:'1'}})

      },
      multipleHandleCommand(index) {
        console.log(this.multipleSelection,index)
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      async getObject () {
        let {success, data} = await test2(1)
        if (success){
          console.log(data)
        }
      },
    },
    async mounted() {
      let {success, data} = await test1()
      if (success){
        console.log(data)
        this.loading = false
      } else {
        this.loading = false
      }
      this.getObject()
    }
  }
</script>

<style scoped>
  .pagination {
    display: inline-block;
  }
</style>
